<div id="admindom">
  <p></p>
  <div>
    <form class="form-inline">
      <div class="form-group">
        <label for="user-list-adminName">用户名</label>
        <input type="text" v-model="search.adminName" class="form-control" id="user-list-adminName" placeholder="用户名">
      </div>
      <div class="form-group">
        <label for="user-list-adminCreated">创建时间</label>
        <input type="text" v-model="search.timeStart" class="form-control" id="user-list-adminCreated1"> ~
        <input type="text" v-model="search.timeEnd" class="form-control" id="user-list-adminCreated2">
      </div>
      <div class="form-group">
        <label for="user-list-adminStatus">状态</label>
        <select v-model="search.adminStatus" class="form-control" id="user-list-adminStatus"> ~
          <option value="0">全部</option>
          <option value="1">正常</option>
          <option value="2">禁用</option>
        </select>
      </div>
      <input type="button" @click="doPage(1)" class="btn btn-default" value="查询" />
      <input type="button" @click="addAdmin" class="btn btn-default" value="新增用户" />
    </form>
  </div>
  <p></p>
  <div>
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>用户名</th>
            <th>用户状态</th>
            <th>创建时间</th>
            <th>最后修改时间</th>
            <th>&nbsp;</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="admin in pageInfo.data">
            <td>{{admin.adminId}}</td>
            <td>{{admin.adminName}}</td>
            <td>{{admin.adminStatus==1?'正常':'禁用'}}</td>
            <td>{{formattime(admin.createTime)}}</td>
            <td>{{formattime(admin.modifyTime)}}</td>

            <td>
              <a href="" @click.prevent="editAdmin(admin.adminId)">编辑</a> /
              <a href="" @click.prevent="deleteAdmin(admin.adminId)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="row">
      <page-bar :page="pageInfo.page" :start="pageInfo.pageStart" :end="pageInfo.pageEnd"
        :max-page-num="pageInfo.maxPageNum" @do-page="doPage($event)"></page-bar>
    </div>



    <!-- 弹窗 -->
    <div class="modal fade" id="admin-edit-win" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label for="adminEdit1" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" v-model="admin.adminName" id="adminEdit1" placeholder="用户名">
                </div>
              </div>
              <div class="form-group">
                <label for="adminEdit2" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" v-model="admin.adminPass" id="adminEdit2"
                    placeholder="密码">
                </div>
              </div>

              <div class="form-group">
                <label for="adminEdit3" class="col-sm-2 control-label">状态</label>
                <div class="col-sm-10">
                  <label class="radio-inline">
                    <input type="radio" v-model="admin.adminStatus" name="itemStatus" id="adminEdit3" value="1"> 正常
                  </label>
                  <label class="radio-inline">
                    <input type="radio" v-model="admin.adminStatus" name="itemStatus" id="adminEdit4" value="2"> 禁用
                  </label>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" @click="updateAdmin" class="btn btn-primary">保存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->




  </div>
</div>
<script>
  let appUserList = Vue.createApp({
    data() {
      return {
        admin: {},
        pageInfo: {},
        // adminName: "",
        search: {
          page: 1,
          row: 10,
          timeStart: "",
          timeEnd: "",
          adminName: '',
          adminStatus: 0
        },
      }
    },
    methods: {
      formattime(time) {
        var d = new Date(time);
        let str = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日 " + d.getHours() + ":" + d
          .getMinutes() + ":" + d.getSeconds();
        return str;
      },
      editAdmin(adminId) {
        axios.get("http://localhost:8080/admin/get", { params: { adminId: adminId } }).then((res => {
          //修改状态
          this.admin = res.data;
          $("#admin-edit-win").modal('show');
        }));
      },updateAdmin(){
        axios.post("http://localhost:8080/admin/update",this.admin).then((res)=>{
                    if(res.data.status==200){
                        showMsg("保存成功","保存提示");
                        this.admin={}
                        $("#admin-edit-win").modal('hide');
                    }
                }); 
      },
      doPage(pageNum) {
        this.search.page = pageNum;
        queryAll(this)
      },
      addAdmin() {
        showOrCheckTab("新增用户", "user-add.html");
      }
    },
    mounted() {
      queryAll(this, null);
    },
  });
  // 分页组件
  appUserList.component("page-bar", {
    props: ["page", "start", "end", "maxPageNum"], // [当前页码，开始页码，结束页码]
    emits: ["do-page"], // 每个按钮上的事件
    template: `
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                    <a href="#" @click.prevent="$emit('do-page',page-1)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    </li>
                    <li :class="{active:n==page}" v-for="n in (end-start+1)"><a href="#" @click.prevent="$emit('do-page',$event.target.text)">{{n+start-1}}</a></li>
                    <li>
                    <a href="#" @click.prevent="$emit('do-page',page+1)" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    </li>
                </ul>
            </nav>
            `
  });

  appUserList.mount("#admindom")

  function queryAll(_this) {
    axios.get("http://localhost:8080/admin/query", {
      params:_this.search 
    })
      .then((res) => {
        _this.pageInfo = res.data
      });
  }
</script>